/**
* @description: 通信网管巡视巡检工单班组成员 —— 已逾期
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="已逾期" @goBack="goBack"/>
    <!-- banner -->
    <view class="top-banner">
     <view class="left-banner">
     	<text
     		class="left-banner-title">{{headerMsg.userName}}分配的{{headerMsg.distributionTime}}{{headerMsg.workOrderType}}</text>
     	<text class="left-banner-time">网管执行人员：{{headerMsg.ExecutiveList}}</text>
     </view>
     <view :class="stateColor">{{state}}</view>
    </view>
    <!-- main -->
    <main>
      <plateTitle title="处理详情" :isRequired="false" class="plate-title" />
      <view class="main-top">
        <van-field v-model="roundsNum" label="巡视次数" readonly error-message-align="right">
          <template #right-icon>
            <view class="round-title">{{roundsType}}</view>
          </template>
        </van-field>
        <van-field v-model="netWorkManagement" label="网管执行人员" readonly error-message-align="right" />
        <van-field v-model="roundsTime" label="巡视时间" readonly error-message-align="right" />
      </view>
      <view class="main-top">
        <van-field v-model="leaveTime" label="离开时间" readonly error-message-align="right" />
        <van-field v-model="leaveTime" label="网管等级" readonly error-message-align="right" />
      </view>
    </main>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from "../common/plateTitle.vue";
import moment from "moment";
export default {
  name: 'networkOverdue',
  components: {navBar,plateTitle },
  props: {},
  data() {
    return {
      state:'已逾期',
      stateCode:'2',
      roundsNum:'一巡',
      netWorkManagement:'--',
      roundsTime:'--',
      leaveTime:'--',
	  headerMsg:{},
	  roundsType:''
    };
  },
  computed: {
    // 计算banner框的流程状态
    stateColor() {
      if(this.stateCode === '1') {
      		 return 'left-state-tg'
      }else if(this.stateCode === '2') {
      		return 'left-state-jj'
      }else {
       return 'left-state-dsp'
      }
    },
  },
  watch: {},
  mounted() {},
  onLoad(option){
	  this.id = option.id;
	  this.getTaskListDetail()
  },
  methods: {
    goBack() {
      uni.navigateTo({
      	url:`/pages/operationApprove/communicationNetWorkMember/communicationNetWorkMember`
      })
    },
	getTaskListDetail(){
		var params = {
			id:this.id
		}
		this.$api.getTaskListDetail(params).then(res => {
			const msg = res.data;
			this.headerMsg = {
				userName: msg.assignPersonnelName,
				distributionTime: msg.inspectionDay,
				workOrderType: msg.name,
				ExecutiveList: msg.executiveName
			};
			this.roundsNum = msg.inspectionNum;
			this.roundsType = moment(msg.inspectionStartDate).format('H:m')
			
		
		  
		})
	}
  }
};
</script>
<style scoped lang="scss">
.task-monitor-main{
  min-height: 100vh;
  background: #F2F6FA;
  .top-banner {
    width: px2vw(1080);
     height: px2vh(240);
    background: #fff;
    margin-bottom: px2vw(30);
    .left-banner {
      width: px2vw(600);
      margin-top: px2vh(47);
      height: px2vh(98);
      float: left;
      margin-left: px2vh(50);
      .left-banner-title {
        display: block;
        font-size: px2vw(42);
        color: #417ADC;
      }
      .left-banner-time {
        font-size: px2vw(36);
        color: #666;
      }

    }
    .left-state-dsp,
    .left-state-tg,
    .left-state-jj {
      width: px2vw(220);
      height: px2vh(80);
      margin-right: px2vh(30);
      margin-top: px2vh(55);
      float: right;
      font-size: px2vw(42);
      font-weight: 700;
      border-radius: px2vw(40);
      text-align: center;
      line-height: px2vh(80);
    }
    .left-state-tg {
      color: #3CDA68;
      background: rgba(62, 218, 104, 0.1);
    }
    .left-state-dsp {
      color: #FF7070;
      background: rgba(255, 112, 112, 0.1);
    }
    .left-state-jj {
      color: #FFAD0E;
      background: rgba(255, 180, 0, 0.1);
    }
  }
  main {
    width: calc(100% - #{px2vw(60)});
    margin:auto;
    height: calc(100vh - #{px2vh(435)});
    overflow-x: auto;
    .plate-title {
      margin-bottom: px2vh(20);
    }
    .main-top {
      overflow: hidden;
      border-radius: px2vh(20);
      margin-bottom: px2vh(30);
      .round-title {
        color: #417ADC;
        padding:px2vw(10) px2vh(26);
        border-radius: px2vh(10);
        background: rgba(65,122,220,.1)
      }
    }
    /deep/ .van-field__control {
      text-align: right;
    }
  }
}
</style>
